<template>
	<view>
		<comHeader :config="navConfig"/>
		
		<view class="scrollBox">
			<view class="ydList">
				<scroll-view scroll-x class="scrollYd">
					<view @tap="blueColor" class="blueColor scrollCon">2人</view>
					<view @tap="blueColor" class="scrollCon">2人</view>
					<view @tap="blueColor" class="scrollCon">3人</view>
					<view @tap="blueColor" class="scrollCon">4人</view>
					<view @tap="blueColor" class="scrollCon">5人</view>
					<view @tap="blueColor" class="scrollCon">6人</view>
					<view @tap="blueColor" class="scrollCon">7人</view>
					<view @tap="blueColor" class="scrollCon">8人</view>
					<view @tap="blueColor" class="scrollCon">9人</view>
					<view @tap="blueColor" class="scrollCon">10人以上</view>
				</scroll-view>
			</view>
			<view class="ydList">
				<scroll-view scroll-x class="scrollYd">
					
					<view class="blueColor scrollCon">今天</view>
					<view class="scrollCon">今天</view>
					<view class="scrollCon"><view>11.24</view><view>周六</view></view>
					<view class="scrollCon"><view>11.24</view><view>周六</view></view>
					<view class="scrollCon"><view>11.24</view><view>周六</view></view>
					<view class="scrollCon"><view>11.24</view><view>周六</view></view>
					<view class="scrollCon"><view>11.24</view><view>周六</view></view>
					<view class="scrollCon"><view>11.24</view><view>周六</view></view>
				</scroll-view>
			</view>
			<view class="ydList">
				<scroll-view scroll-x class="scrollYd">
					<view class="blueColor scrollCon">12:00</view>
					<view class="scrollCon">12:30</view>
					<view class="scrollCon">13:00</view>
					<view class="scrollCon">13:30</view>
					<view class="scrollCon">14:00</view>
					<view class="scrollCon">14:30</view>
				</scroll-view>
			</view>
			<view class="ydList">
				<scroll-view scroll-x class="scrollYd">
					<view class="grayColor scrollCon"><view>包间</view><view>5人起订</view></view>
					<view class="blueColor scrollCon">隔断散台</view>
				</scroll-view>
			</view>
		</view>
		<view class="botmBox">
			<view class="botmBtn" @tap="goYuDing2">
				<view>
					<text>11月21日 今天12:00， 2人</text>
					<text>隔断散台</text>
				</view>
				<view>立即预定</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				navConfig:{
					isFixed:false,
					comScroll:0,
					left:{
						text:'',
						isShowLeft:true,
						leftGobackColor:'#333333',
						leftTextColor:'',
					},
					mid:{
						isShowMid:true,
						text:'新韩小馆烤肉'
					},
					right:{
						text:'',
						isShowRight:false,
					}
				},
				
			}
		},
		methods:{
			blueColor(){
				
			},
			goYuDing2(){
				uni.navigateTo({
					url:'/pages/home/food/yuding2'
				})
			}
		}
	}
</script>

<style>
	.scrollBox{
		padding-top:160upx;
		padding-bottom:120upx;
	}
	/* 底部按钮 */
	.botmBox{
		background: #FFFFFF;
		padding: 20upx 0;
		width: 100%;
		position: fixed;
		bottom:0upx;
		left: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.botmBtn{
		width:714upx;
		height:80upx;
		line-height:80upx;
		border-radius: 80upx;
		box-shadow: 0px 0px 27px 0px rgba(5,4,2,0.15);
		background: linear-gradient(to bottom,#4C89D8,#2A60BA);
		color: #FFFFFF;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding:10upx 0upx;
		box-sizing: border-box;
		text-align: center;
	}
	
	
	.botmBtn > view text{
		font-size: 28upx;
	}
	.botmBtn > view text:last-child{
		margin-left:26upx;
	}
	.botmBtn > view:last-child{
		height: 62upx;
		line-height: 62upx;
		font-size:32upx;
		width:190upx;
		border-left: 1px solid #FFFFFF;
		margin-left:26upx;
	}
	
	.ydList{
		margin-left: 36upx;
		margin-bottom: 60upx;
		display: flex;
		flex-direction: column;
		
	}
		
	.scrollYd{
		width:100%;
		/* height: 76upx; */
		white-space: nowrap;
	}
	.scrollYd  .scrollCon{
		height: 76upx;
		line-height: 76upx;
		padding:0 34upx;
		box-sizing: border-box;
		display: inline-block;
		color: #333333;
	}
	.scrollCon view{
		font-size: 26upx;
		line-height: 30upx;
		text-align: center;
	}
	/* .scrollYd  view text{
		font-size: 26upx;
		line-height: 30upx;
		text-align: center;
		display: block;
	} */
	
	.scrollBox > view{
		font-size: 30upx;
	}
	.scrollBox > view:first-child{
		font-size: 32upx;
	}
	.scrollBox > view:nth-child(2){
		font-size: 28upx;
	}
	
	.scrollYd .blueColor{
		color: #145FC1;
		background: rgba(255,255,255,1);
		box-shadow: 0px 0px 14px 2px rgba(5,36,72,0.15);
		border-radius: 76upx;
	}
	.scrollYd .grayColor{
		color: #999999;
	}
</style>
